<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="divMain">
        <div class="divLeft">
          <el-card class="elcardBanner" :body-style="{ padding: '0px' }">
            <img src="@/assets/home/elcardbanner.png" alt="" class="imgLeft">
            <img src="@/assets/home/touxiang.png" alt="" class="imgTX">
            <img src="@/assets/home/right.png" alt="" class="imgRight">
            <p class="touxiangP">仓储管理员</p>
            <p class="subjectTitle">我不是为了输赢，我就是认真！</p>
            <p class="subjectAuthor">--- 罗永浩</p>
            <p class="site">北京总仓</p>
          </el-card>
          <el-card class="backlog" :body-style="{ padding: '0px' }">
            <p class="titleP">待办信息</p>
            <div class="itemList">
              <el-row :gutter="12">
                <el-col v-for="(item, index) in list" :key="index" :span="8">
                  <el-card class="elcarditem" shadow="hover">
                    <a href="">
                      <p class="topP">
                        <span
                          :style="`backgroundColor: ${item.color}`"
                        ><i
                          class="iconfont"
                          :class="item.icon"
                        /></span>
                        {{ item.name }}
                      </p>
                      <p class="bottomP">
                        新增<span>{{ item.value1 }}</span> 待审核<span
                          :style="`color: ${item.color}`"
                        >{{ item.value2 }}</span>
                      </p>
                    </a>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <div class="divRight">
          <el-card>
            <div class="tit">通知/公告</div>
            <ul>
              <li v-for="(item, index) in msgList" :key="index">
                <p>{{ item.title }}</p>
                <span>{{ item.time }}</span>
              </li>
            </ul>
          </el-card>
        </div>
      </div>
      <div class="divRW">
        <el-card class="elcardRW">
          <h5>任务导航</h5>
          <div class="task">
            <el-row>
              <el-col v-for="(item, index) in taskList" :key="index" :span="4" class="elcol">
                <el-card class="taskitem" shadow="hover">
                  <a href="">
                    <p class="taskP">
                      <span
                        :style="`backgroundColor: ${item.color}`"
                      ><i
                        class="iconfont"
                        :class="item.icon"
                      /></span>
                      {{ item.name }}
                    </p>
                  </a>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div class="inout-charts">
        <el-card class="chartCard">
          1
        </el-card>
      </div>
      <div class="libs">
        <el-card class="cardLeft">1</el-card>
        <el-card class="cardRight">1</el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { todoList, sumList, areaUserStatus, stockUserStatus } from '@/api'
export default {
  name: 'Dashboard',
  data() {
    return {
      list: [],
      iconList: [
        {
          icon: 'icon-rukudan',
          color: '#3373f6'
        },
        {
          icon: 'icon-chukudan',
          color: '#f4b53f'
        },
        {
          icon: 'icon-navicon-pdd',
          color: '#ee7830'
        }
      ],
      msgList: [
        {
          title: '紧急盘点通知',
          time: '2020.12.30 18:23:14'
        },
        {
          title: '运维服务更新通知',
          time: '2021.01.25 18:23:14'
        },
        {
          title: '客户入库变更通知',
          time: '2021.01.26 18:23:14'
        },
        {
          title: '五一放假通知',
          time: '2021.02.15 18:23:14'
        },
        {
          title: '品达物流系统对接通知',
          time: '2021.03.25 18:23:14'
        }
      ],
      taskList: [
        {
          icon: 'icon-daishouhuo',
          name: '收货任务',
          color: '#3274f7'
        },
        {
          icon: 'icon-piliangshangjia',
          name: '上架任务',
          color: '#78d0ef'
        },
        {
          icon: 'icon-pandian',
          name: '盘点任务',
          color: '#ee7830'
        },
        {
          icon: 'icon-jianhuo',
          name: '拣货任务',
          color: '#ec6b9d'
        },
        {
          icon: 'icon-iconku-',
          name: '交接任务',
          color: '#f4b43f'
        }
      ]
    }
  },

  computed: {
    ...mapGetters(['name'])
  },
  async created() {
    const res = await todoList()
    // console.log(res)
    this.list = res.data.data.map((item, index) => {
      return { ...item, ...this.iconList[index] }
    })
    // console.log(this.list)
    // const res1 = await sumList()
    // const res2 = await areaUserStatus()
    // const res3 = await stockUserStatus()
    // console.log('出入库信息', res1)
    // console.log('库区使用情况', res2)
    // console.log('库存使用情况', res3)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.divMain {
  display: flex;
  .divLeft {
    width: 866px;
    height: 450px;
    margin-right: 30px;
    .elcardBanner {
      position: relative;
      width: 100%;
      height: 148px;
      background: linear-gradient(270deg, #ffc771, #ffa634);
    }
    .imgLeft {
      width: 166px;
      height: 148px;
    }
    .imgRight {
      float: right;
      width: 426px;
      height: 148px;
    }
    .imgTX {
      position: absolute;
      width: 62px;
      height: 62px;
      left: 39px;
      top: 30px;
    }
    .touxiangP {
      position: absolute;
      left: 33px;
      // top: 0;
      bottom: -7px;
      font-size: 16px;
      font-weight: 700;
    }
    .subjectTitle {
      position: absolute;
      left: 243px;
      top: 5px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
    .subjectAuthor {
      position: absolute;
      left: 433px;
      top: 50px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }
    .site {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 147px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      background-color: #f7ebda;
      border-radius: 5px;
    }
  }
  .divRight {
    position: relative;
    width: 261px;
    height: 451px;
    .el-card {
      height: 450px;
    }
    .tit {
      font-size: 16px;
      font-weight: 700;
      color: #332929;
      margin-left: 10px;
    }
    ul {
      position: absolute;
      top: 60px;
      left: -10px;
      li {
        width: 200px;
        list-style: none;
        font-size: 14px;
        height: 75px;
        border-top: 1px solid #ccc;
        p {
          // padding: 0;
          height: 30px;
          margin: 0;
        }
        span {
          // margin-top: -10px;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
  .el-card {
    border-radius: 11px;
    margin-top: 20px;
    padding: 0;
  }
}
.backlog {
  width: 100%;
  height: 282px;
  // padding-left: 20px;
  .titleP {
    font-size: 16px;
    font-weight: 700;
    margin-left: 20px;
    margin-top: 10px;
  }
.itemList {
  margin-top: -30px;
  padding: 0 10px;
  .elcarditem {
    border: none;
    background-color: #faf7f7;
    a {
      display: block;
      position: relative;
      // background-color: #faf7f7;
      width: 240px;
      height: 165px;
      .topP {
        position: absolute;
        top: -20px;
        left: 0;
        font-size: 16px;
        font-weight: 700;
        span {
          display: inline-block;
          width: 49px;
          height: 49px;
          // font-size: 30px;
          text-align: center;
          // line-height: 49px;
          color: #fff;
          border-radius: 10px;
          margin-right: 10px;
          i {
            font-size: 25px;
          }
        }
      }
      .bottomP {
        position: absolute;
        bottom: -20px;
        font-size: 15px;
        color: #666;
        span {
          margin-left: 5px;
          margin-right: 5px;
          font-size: 30px;
          color: black;
          font-weight: 400;
        }
      }
    }
  }
}
}
.elcardRW {
  width: 1127px;
  height: 188px;
  margin-top: 40px;
  border-radius: 11px;
  h5 {
    font-size: 15px;
    margin-top: -15px;
  }
  .task {
    margin-top: -20px;
    width: 100%;

    .taskitem {
      // width: 191px;
      border: none;
      background-color: #fbf7f7;
      height: 93px;
      border-radius: 10px;
      // margin-right: 20px;
      a {
        display: block;
        position: relative;
        width: 191px;
        // height: 93px;
        text-align: center;
        // line-height: px;
        .taskP {
          position: absolute;
          top: -13px;
          left: 0;
          font-size: 16px;
        font-weight: 700;
        span {
          display: inline-block;
          width: 49px;
          height: 49px;
          // font-size: 30px;
          text-align: center;
          // line-height: 49px;
          color: #fff;
          border-radius: 50px;
          margin-right: 10px;
          i {
            font-size: 25px;
          }
        }
      }
    }
  }
}
}
.elcol {
  margin-right: 30px;
}
.chartCard {
  width: 1127px;
  height: 500px;
  margin-top: 30px;
}
.libs {
  display: flex;
  margin-top: 30px;
  .cardLeft {
    width: 330px;
    height: 354px;
    margin-right: 30px;
  }
  .cardRight {
    width: 767px;
    height: 354px;
  }
}
</style>
